<template>
    <div class="outer-card">
      <div class="card past">
        <h2 class="title">前世：远东华尔街</h2>
        <p class="description">
          19世纪末，外滩是西方列强的金融中心，哥特式建筑见证了上海的崛起。
        </p>
        <img :src="pastImage" alt="外滩历史图片" class="image" />
      </div>
      <div class="card present">
        <h2 class="title">今生：全球地标</h2>
        <p class="description">
          如今，外滩融合历史与现代，陆家嘴摩天大楼与万国建筑交相辉映。
        </p>
        <img :src="presentImage" alt="外滩现代图片" class="image" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 图片路径（请替换为实际URL）
  const pastImage = ref('https://example.com/past-image.jpg');
  const presentImage = ref('https://example.com/present-image.jpg');
  </script>
  
  <style scoped>
  .outer-card {
    display: flex;
    flex-direction: row; /* 横向布局 */
    width: 600px; /* 宽度 */
    height: 400px; /* 高度，宽度约为高度的1.5倍 (600 / 400 = 1.5) */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
  }
  
  .outer-card:hover {
    transform: scale(1.03); /* 悬停时轻微放大 */
  }
  
  .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    color: white;
    text-align: center;
  }
  
  .past {
    background: linear-gradient(to right, #8B4513, #D2B48C); /* 复古色调 */
  }
  
  .present {
    background: linear-gradient(to right, #00BFFF, #FFFFFF); /* 现代色调 */
    color: #666;
  }
  
  .title {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }
  
  .description {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  
  .image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
  }
  </style>